<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery tablesorter 2.0 - Dragtable Mod (beta)</title>

	<!-- jQuery -->
	<script src="js/jquery-latest.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>

	<!-- Demo stuff -->
	<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/jq.css">
	<link href="css/prettify.css" rel="stylesheet">
	<script src="js/prettify.js"></script>
	<script src="js/docs.js"></script>
	<style>
	/* override jQuery UI overriding Bootstrap */
	.accordion .ui-widget-content a {
		color: #337ab7;
	}
	</style>

	<!-- Tablesorter: theme -->
	<link class="theme" rel="stylesheet" href="../css/theme.blue.css">
	<link rel="stylesheet" href="../css/dragtable.mod.css">

	<!-- Tablesorter script: required -->
	<script src="../js/jquery.tablesorter.js"></script>
	<script src="../js/jquery.tablesorter.widgets.js"></script>

	<script src="../js/extras/jquery.dragtable.mod.js"></script>

	<style id="css">/* optional styling */
caption {
	/* override bootstrap adding 8px to the top & bottom of the caption */
	padding: 0;
}
.ui-sortable-placeholder {
	/* change placeholder (seen while dragging) background color */
	background: #ddd;
}
div.table-handle-disabled {
	/* optional red background color indicating a disabled drag handle */
	background-color: rgba(255,128,128,0.5);
	/* opacity set to zero for disabled handles in the dragtable.mod.css file */
	opacity: 0.7;
}
/* fix cursor */
.tablesorter-blue .tablesorter-header {
	cursor: default;
}
.sorter {
	cursor: pointer;
}</style>
		<script id="js">$(function () {
	$('table')
	// initialize dragtable FIRST!
	.dragtable({
		// *** new dragtable mod options ***
		// this option MUST match the tablesorter selectorSort option!
		sortClass: '.sorter',
		// this function is called after everything has been updated
		tablesorterComplete: function(table){},

		// *** original dragtable settings (non-default) ***
		dragaccept: '.drag-enable',  // class name of draggable cols -> default null = all columns draggable

		// *** original dragtable settings (default values) ***
		revert: false,               // smooth revert
		dragHandle: '.table-handle', // handle for moving cols, if not exists the whole 'th' is the handle
		maxMovingRows: 40,           // 1 -> only header. 40 row should be enough, the rest is usually not in the viewport
		excludeFooter: false,        // excludes the footer row(s) while moving other columns. Make sense if there is a footer with a colspan. */
		onlyHeaderThreshold: 100,    // TODO:  not implemented yet, switch automatically between entire col moving / only header moving
		persistState: null,          // url or function -> plug in your custom persistState function right here. function call is persistState(originalTable)
		restoreState: null,          // JSON-Object or function:  some kind of experimental aka Quick-Hack TODO: do it better
		exact: true,                 // removes pixels, so that the overlay table width fits exactly the original table width
		clickDelay: 10,              // ms to wait before rendering sortable list and delegating click event
		containment: null,           // @see http://api.jqueryui.com/sortable/#option-containment, use it if you want to move in 2 dimesnions (together with axis: null)
		cursor: 'move',              // @see http://api.jqueryui.com/sortable/#option-cursor
		cursorAt: false,             // @see http://api.jqueryui.com/sortable/#option-cursorAt
		distance: 0,                 // @see http://api.jqueryui.com/sortable/#option-distance, for immediate feedback use "0"
		tolerance: 'pointer',        // @see http://api.jqueryui.com/sortable/#option-tolerance
		axis: 'x',                   // @see http://api.jqueryui.com/sortable/#option-axis, Only vertical moving is allowed. Use 'x' or null. Use this in conjunction with the 'containment' setting
		beforeStart: $.noop,         // returning FALSE will stop the execution chain.
		beforeMoving: $.noop,
		beforeReorganize: $.noop,
		beforeStop: $.noop
	})
	// initialize tablesorter
	.tablesorter({
		theme: 'blue',
		// this option MUST match the dragtable sortClass option!
		selectorSort: '.sorter',
		widgets: ['zebra', 'filter', 'columns']
	});
});</script>

	</head>
	<body>

		<div id="banner">
			<h1>table<em>sorter</em></h1>
			<h2>Dragtable Mod (beta)</h2>
			<h3>Flexible client-side table sorting</h3>
			<a href="index.html">Back to documentation</a>
		</div>

		<div id="main">
			<p></p>
			<br>
			<div id="root" class="accordion">

				<h3 id="notes"><a href="#">Notes</a></h3>
				<div>
					<ul>
						<li>This demo uses a modified version of the <a href="http://akottr.github.io/dragtable/">jQuery UI Dragtable widget</a> (beta) to work with tablesorter.</li>
						<li>This mod <strong>has been</strong> tested with the following widgets: <span class="good">alignChar</span>, <span class="good">columns</span>, <span class="good">cssStickyHeaders</span>, <span class="good">editable</span>, <span class="good">filter</span>, <span class="good">grouping</span>, <span class="good">headerTitles</span>, <span class="good">math</span>, <span class="good">output</span>, <span class="good">pager</span> <span class="good">print</span>, <span class="good">reflow</span>, <span class="good">resizable</span>, <span class="good">repeatHeaders</span>, <span class="good">staticRow</span>, <span class="good">uitheme</span> &amp; <span class="good">zebra</span>.</li>
						<li>This mod <strong><em>does not</em></strong> currently work with the following widgets:
							<ul>
								<li><span class="bad">chart</span> - needs more work to be compatible.</li>
								<li><span class="bad">columnSelector</span> - needs more work - making this compatible will require significant changes to the dragtable core.</li>
								<li><span class="bad">saveSort</span> - this saves the newly moved sorted column properly, but on page reload the column order is restored so it sorts the incorrect column.</li>
								<li><span class="bad">scroller</span> - way too much work to make this compatible.</li>
								<li><span class="bad">stickyHeaders</span> - needs more work - can't get the drag handle in the cloned sticky header from passing the mousedown on to the original drag handle.</li>
							</ul>
						</li>
						<li>Any widgets not listed above can be assumed to be incompatible, for now.</li>
					</ul>
				</div>

				<h3 id="setup"><a href="#">Tablesorter setup</a></h3>
				<div>
					A complete javascript example can be found in the demo section, below the table.
					<p></p>
					To use this mod:
					<ul>
						<li>Initialize the dragtable mod script first, then initialize tablesorter.</li>
						<li><span class="label label-warning">Warning!</span> When setting up the initialization code, make sure that the dragtable <code>sortClass</code> option <em>exactly matches</em> the tablesorter <code>selectorSort</code> option, or the table will be unsortable.
						<pre class="prettyprint lang-js">$('table')
  .dragtable({ sortClass: '.sorter' }) // this is already the default value
  .tablesorter({ selectorSort: '.sorter' }); // this default value is 'th, td'</pre></li>
						<li><span class="label warning">Warning!</span> Do not reference a column using jQuery data (e.g. <code>$('th:contains(Name)').data('sorter', 'text');</code>) or by it's zero-based index<sup class="bright">(1)</sup> because these references do not get updated after a column move!
							<p></p>
							Instead, use one of the following methods (these examples set the column parser):
							<h4>Set parser by data-attribute or header class</h4>
							<pre class="prettyprint lang-html">&lt;tr&gt;
	&lt;th class="col-id" data-sorter="digit"&gt;...&lt;/th&gt; &lt;!-- parser set by data-attribute --&gt;
	&lt;th class="col-name drag-enable sorter-text"&gt;...&lt;/th&gt; &lt;!-- parser set by header class --&gt;
	&lt;th class="col-date drag-enable"&gt;...&lt;/th&gt; &lt;!-- parser set by headers option (see below) --&gt;
&lt;/tr&gt;</pre>
							<h4>Or, set parser by <code>headers</code> option</h4>
							<pre class="prettyprint lang-js">$('table').tablesorter({
	headers : {
		'.col-date' : { sorter : 'shortDate' }
	}
});</pre></li>
							<li>In order to get dragtable to work, the mod will add a div to act as a dragable handle and wrap the header text in a div<sup class="bright">(2)</sup> which needs to be targeted by the <code>selectorSort</code> option to make it clickable for sorting.
							<p></p>
							The <em>resulting HTML</em> may look like this:
							<pre class="prettyprint lang-html">&lt;tr&gt;
	&lt;th class="col-id" data-sorter="digit"&gt;
		&lt;div class="table-handle-disabled"&gt;&lt;/div&gt;
		&lt;!-- clicking on the "sort" wrapper below will not trigger a sort, because the cell is not set to sort --&gt;
		&lt;div class="sorter"&gt;9999&lt;/div&gt;
	&lt;/th&gt;
	&lt;th class="col-name sorter-text drag-enable"&gt;
		&lt;div class="table-handle"&gt;&lt;/div&gt;
		&lt;div class="sorter"&gt;Name&lt;/div&gt;
	&lt;/th&gt;
	&lt;th class="col-date drag-enable"&gt;
		&lt;div class="table-handle"&gt;&lt;/div&gt;
		&lt;div class="sorter"&gt;1/1/2015&lt;/div&gt;
	&lt;/th&gt;
&lt;/tr&gt;</pre>
						</li>
					</ul>
					<span class="bright">(1)</span> Options that use a column index (such as the <code>sortList</code>), or an array of settings (like the <code>resizable_widths</code> option) are updated internally by the mod.
					<p></p>
					<span class="bright">(2)</span> The class name for the dragable handle is set by the dragtable <code>dragHandle</code> option &amp; the class name for the clickable div wrapping the header text is set by the dragtable <code>sortClass</code> option.
				</div>

			</div>

			<h1>Demo</h1>
			<div id="demo"><table class="tablesorter">
	<caption>Student Grades</caption>
	<thead>
		<tr>
			<th>Name (0)</th> <!-- disable dragtable on this column -->
			<th class="drag-enable">Major (1)</th>
			<th class="drag-enable">Sex (2)</th>
			<th class="drag-enable">English (3)</th>
			<th class="drag-enable">Japanese (4)</th>
			<th class="drag-enable">Calculus (5)</th>
			<th class="drag-enable">Geometry (6)</th>
		</tr>
	</thead>
	<tfoot>
		<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
	</tfoot>
	<tbody>
		<tr><td>Student01 (0)</td><td>Languages (1)</td><td>male (2)</td><td>80 (3)</td><td>70 (4)</td><td>75 (5)</td><td>80 (6)</td></tr>
		<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
		<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
		<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
		<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
		<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
		<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
		<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
		<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
		<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
		<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
		<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
		<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
		<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
		<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
		<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
		<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
		<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
		<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
		<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
	</tbody>
</table></div>

		<h1>HTML</h1>
		<div id="html">
			<pre class="prettyprint lang-html"></pre>
		</div>

		<h1>Javascript</h1>
		<div id="javascript">
			<pre class="prettyprint lang-javascript"></pre>
		</div>

		<h1>Optional CSS</h1>
		<div id="css">
			<pre class="prettyprint lang-css"></pre>
		</div>

	</div>

</body>
</html>
